<template>
  <!--侧滑菜单容器-->
  <div id="offCanvasWrapper" class="mui-off-canvas-wrap">
    <!--菜单部分-->
    <aside v-if="isShowFilter"  @click="showFilter()" id="offCanvasSide" class="mui-off-canvas-right aside-menu">
      <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
        <div class="mui-scroll flex-column flex-space-between">
          <div>
            <h4 class="means-title">完成情况</h4>
            <div class="flex-justify-start">
              <div @click.stop="isFinished=-1" class="gray-btn" :class="{'offcanvasActive':isFinished===-1}">全部</div>
              <div @click.stop="isFinished=0" class="gray-btn" :class="{'offcanvasActive':isFinished===0}">未完成</div>
              <div @click.stop="isFinished=1" class="gray-btn" :class="{'offcanvasActive':isFinished===1}">已完成</div>
            </div>
          </div>
          <div class="flex-center screen-btn">
            <div @click.stop="resetFilter()"  class="reset-btn offCanvasHide">重置</div>
            <div @click.stop="doFilter()"  class="sure-btn offCanvasHide">确定</div>
          </div>
        </div>
      </div>
    </aside>


    <div class="mui-inner-wrap">
      <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper record-member-lists">
        <header class="mui-bar mui-bar-nav">
          <div class="header-common-title flex-justify-start">
            <div @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></div>
            <div class="header-search flex-center">学习统计</div>
            <div class="header-right flex-between-center">
              <img @click="goSearch()" v-if="fn.isDWB()" class="back-btn" src="../../../../static/images/search_white.png">
              <a @click="showFilter()" href="javascript:void(0);" class="header-right flex-center"><img src="../../../../static/images/shaixuan.png">筛选</a>
            </div>
          </div>
        </header>

        <div id="slider" class="mui-slider mui-fullscreen mui-pages">
          <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="meeting-tab flex-justify-start">
              <a @click="tabIndex=1" :class="{'mui-active':tabIndex==1}" class="mui-control-item" href="javascript:void(0)">党员学习统计</a>
              <a @click="tabIndex=2" :class="{'mui-active':tabIndex==2}" class="mui-control-item" href="javascript:void(0)">答题情况统计</a>
            </div>
          </div>
          <div class="mui-slider-group">
            <!-- ---------党员学习统计---------start -->
            <statisticsStudyComponent :key="refresh" ref="ref2" v-if="tabIndex==1 && fn.isDWB()"></statisticsStudyComponent>
            <zhibuStatisticsStudyComponent :key="refresh" ref="ref2" v-if="tabIndex==1 && !fn.isDWB()"></zhibuStatisticsStudyComponent>
            <!-- ---------党员学习统计---------end -->
            <!-- ---------答题情况统计-----------start -->
            <statisticsAnswerComponent :key="refresh" ref="ref2" v-if="tabIndex==2 && fn.isDWB()"></statisticsAnswerComponent>
            <zhibuStatisticsAnswerComponent :key="refresh" ref="ref2" v-if="tabIndex==2 && !fn.isDWB()"></zhibuStatisticsAnswerComponent>
            <!-- ---------答题情况统计---------end -->
          </div>
        </div>

      </div>
      <!-- off-canvas backdrop -->
      <div @click="hideFilter()" v-if="isShowFilter" class="mui-off-canvas-backdrop"></div>
    </div>
  </div>
</template>

<script>
  import partyMemberLearningFooterbar from '../common/partyMemberLearningFooterbar.vue'
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import statisticsAnswerComponent from './statisticsAnswerComponent'
  import statisticsStudyComponent from './statisticsStudyComponent'
  import zhibuStatisticsStudyComponent from './zhibuStatisticsStudyComponent'
  import zhibuStatisticsAnswerComponent from './zhibuStatisticsAnswerComponent'
  export default {
    components: {
      partyMemberLearningFooterbar, statisticsAnswerComponent, statisticsStudyComponent, zhibuStatisticsStudyComponent, zhibuStatisticsAnswerComponent
    },
    name: 'studyStatistics',
    data () {
      return {
        fn: tools,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        isFinished: -1,
        tabIndex: 1,
        objectsName: '',
        swipeData: [],
        infinite: true,
        pageIndex: 0,
        refresh: 0,
        isShowFilter: false
      }
    },
    methods: {
      showFilter () {
        if (this.tabIndex === 2) {
          return
        }
        if (Number.isInteger(this.$store.state.isFinished)) {
          this.isFinished = this.$store.state.isFinished
        }
        this.isShowFilter = true
      },
      hideFilter () {
        this.isShowFilter = false
      },
      resetFilter () {
        this.isFinished = -1
      },
      doFilter () {
        this.$store.state.isFinished = this.isFinished
        this.refresh = Date.now()
        this.$refs.ref2.$forceUpdate()
        this.hideFilter()
      },
      // 学习搜索
      goSearch () {
        this.$router.push({path: '/studySearch/' + this.tabIndex})
      }
    }
  }
</script>

<style scoped lang="scss">
  .screen-btn {
    /*margin-bottom: 80px;*/
  }
  .aside-menu.mui-off-canvas-right {
    z-index:999;
    visibility:visible;
  }
</style>
